<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-xs-12 col-md-6"
             v-for="item in notifications"
             :key="(typeof item === 'object') ? item[Object.keys(item)[0]] : item">
          <transition appear
                      enter-active-class="animated zoomIn"
                      leave-active-class="animated zoomOut">
            <notification-card :data="item"/>
          </transition>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
  import NotificationCard from "src/components/NotificationCard";

  export default {
    name: "Notification",
    components: {NotificationCard},
    data: function () {
      return {
        notifications: [],
        servers: []
      };
    },
    methods: {
      async getNotificationsList () {
        try {
          let {data} = await this.$axios.get('https://api.reikohaku.fun/notice/ReiKohaku/notice/raw/master/sonolus_notification_list.json');
          this.notifications = data.notifications;
        } catch {}
      }
    },
    async mounted() {
      this.$q.loading.show();
      await this.getNotificationsList();
      this.$q.loading.hide();
    }
  }
</script>

<style scoped>

</style>
